<template>
  <view>
    <view class="container-view">
      <view class="top-bg"></view>
      <view class="status-view">
        <image
          src="../../static/detail_icon_1.png"
          class="status-icon"
          v-if="
            ['待出发', '待审核', '待评估', '待服务'].includes(detailData.status)
          "></image>
        <image
          src="../../static/detail_icon_2.png"
          class="status-icon"
          v-if="detailData.status === '结束待确认'"></image>
        <image
          src="../../static/detail_icon_2.png"
          class="status-icon"
          v-if="detailData.status === '待评价'"></image>
        <image
          src="../../static/detail_icon_3.png"
          class="status-icon"
          v-if="detailData.status === '已完成'"></image>
        <image
          src="../../static/detail_icon_4.png"
          class="status-icon"
          v-if="
            ['待退款', '退款中', '已退款', '已拒绝'].includes(detailData.status)
          "></image>
        <view class="status-text-view" v-if="detailData.status === '待评估'">
          <view class="status-text">{{ detailData.status }}</view>
          <view class="status-tip">医院正在审核中...</view>
        </view>
        <view class="status-text-view" v-if="detailData.status === '待出发'">
          <view class="status-text">{{ detailData.status }}</view>
          <view class="status-tip">等待预约时间到来...</view>
        </view>
        <view class="status-text-view" v-if="detailData.status === '待服务'">
          <view class="status-text">{{ detailData.status }}</view>
          <view class="status-tip">护士正在赶来...</view>
        </view>
        <view class="status-text-view" v-if="detailData.status === '服务中'">
          <view class="status-text">{{ detailData.status }}</view>
          <view class="status-tip">护士正在服务中...</view>
        </view>
        <view
          class="status-text-view"
          v-if="detailData.status === '结束待确认'">
          <view class="status-text">{{ detailData.status }}</view>
          <view class="status-tip">护士服务已结束...</view>
        </view>
        <view class="status-text-view" v-if="detailData.status === '待评价'">
          <view class="status-text">{{ detailData.status }}</view>
          <view class="status-tip">请对护士服务进行评价</view>
        </view>
        <view class="status-text-view" v-if="detailData.status === '已完成'">
          <view class="status-text">{{ detailData.status }}</view>
          <view class="status-tip">很高兴为您服务</view>
        </view>
        <view
          class="status-text-view"
          v-if="['待退款', '退款中', '已退款'].includes(detailData.status)">
          <view class="status-text">{{ detailData.status }}</view>
          <view class="status-tip">很遗憾</view>
        </view>
        <view class="status-text-view" v-if="detailData.status === '已拒绝'">
          <view class="status-text">{{ detailData.status }}</view>
          <view class="status-tip">
            拒绝原因：{{ detailData.rejectionReason }}
          </view>
        </view>
      </view>
      <view class="nurse-info-view" v-if="detailData.dispatchNursesUid">
        <view class="title">护士信息</view>
        <view class="body">
          <image :src="detailData.pictureName"></image>
          <view class="right">
            <view class="name">
              {{ detailData.dispatchNurses }} {{ detailData.nursesPhone }}
            </view>
            <view class="hospital-name">{{ detailData.hospitalName }}</view>
          </view>
        </view>
      </view>

      <view class="card-view info-view">
        <view class="info-row">
          <view class="title">服务时间</view>
          <view class="name">{{ detailData.serviceTime || "" }}</view>
        </view>
        <view class="div-line" />
        <view class="info-row">
          <view class="title">服务地址</view>
          <view class="name">{{ detailData.visitorAddress }}</view>
        </view>
        <view class="div-line" />
        <view class="info-row">
          <view class="title">被护理人</view>
          <view class="name">
            {{ detailData.visitor }} {{ detailData.sex }} {{ detailData.age }}岁
          </view>
        </view>
        <view class="div-line" />
        <view class="info-row">
          <view class="title">联系电话</view>
          <view class="name">{{ detailData.contactPhone }}</view>
        </view>
        <view class="div-line" />
        <view class="info-row">
          <view class="title">情况描述</view>
          <view class="name">{{ detailData.situationDesc }}</view>
        </view>
      </view>

      <view class="card-view img-card-view">
        <view class="title">诊断证明</view>
        <uni-grid :column="3" :showBorder="false" :highlight="false">
          <uni-grid-item v-for="item in diagnosisProofList">
            <view class="item-view">
              <image :src="item"></image>
            </view>
          </uni-grid-item>
        </uni-grid>
      </view>

      <view class="card-view proj-view">
        <view class="title">{{ detailData.hospitalName }}</view>
        <view class="list" v-for="item in detailData.itemInfos">
          <image :src="item.serviceItemImg"></image>
          <view class="name">{{ item.serviceItem }}</view>
          <view class="price">
            <cn-money
              :money="Number.parseFloat(item.serviceItemPrice)"></cn-money>
          </view>
        </view>
      </view>

      <view class="card-view order-info">
        <view class="info-row">
          <view class="title">订单编号</view>
          <view class="name">
            {{ detailData.orderNum }}
            <view class="text-btn" @click="navToOrderSteps">订单流程</view>
          </view>
        </view>
        <view class="div-line" />
        <view class="info-row">
          <view class="title">下单时间</view>
          <view class="name">{{ detailData.orderTime }}</view>
        </view>
        <view class="div-line" />
        <view class="info-row">
          <view class="title">支付方式</view>
          <view class="name">微信支付</view>
        </view>

        <view class="div-line" />
        <!-- 耗材信息行 -->
        <view class="info-row" @click="toggleMaterialList">
          <view class="title">
            耗材（{{ detailData.orderMaterialnfo.length }}项）
          </view>
          <view class="arrow" :class="{ rotate: showMaterialList }">▼</view>
        </view>

        <!-- 展开的列表 -->
        <view v-if="showMaterialList" class="material-list">
          <view
            v-for="(item, index) in detailData.orderMaterialnfo"
            :key="index"
            class="material-item"
            :class="{
              'has-line':
                detailData.orderMaterialnfo.length > 1 &&
                index < detailData.orderMaterialnfo.length - 1,
            }">
            <view class="material-info">
              <text class="name bold-text">
                耗材名称:{{ item.materialName }}
              </text>
              <text class="name bold-text">
                \n耗材价格:{{ item.inputPrice }}
              </text>
              <text class="name bold-text">
                \n耗材数量:{{ item.materialNum }}
              </text>
              <text class="name bold-text">\n耗材单位:{{ item.unitName }}</text>
            </view>
          </view>
        </view>
      </view>

      <view
        class="bottom-fixed-view"
        v-if="['待支付', '服务中添加'].includes(detailData.status)">
        <view class="left">
          <image src="../../static/tab_custm.png"></image>
          <view>客服</view>
        </view>
        <view class="expand"></view>
        <view class="btn-view" @click="cancelNoPayOrder">取消订单</view>
        <view style="width: 10px"></view>
        <view class="btn-view" @click="toPay">去支付</view>
      </view>

      <view
        class="bottom-fixed-view"
        v-if="['待评估', '待出发'].includes(detailData.status)">
        <view class="left">
          <image src="../../static/tab_custm.png"></image>
          <view>客服</view>
        </view>
        <view class="expand"></view>
        <view class="btn-view" @click="cancelOrder">取消订单</view>
      </view>

      <view
        class="bottom-fixed-view"
        v-if="['已完成'].includes(detailData.status)">
        <view class="left">
          <button  style="display: flex;align-items: center;" open-type="contact">
            <image src="../../static/tab_custm.png"></image>
            <view>客服</view>
          </button>
        </view>
        <view class="expand"></view>
        <view class="btn-view" @click="navToReschedule(item)">再次预约</view>
        <view style="width: 10px"></view>
        <view class="btn-view" @click="navToEvaluate">评价</view>
      </view>

      <view
        class="bottom-fixed-view"
        v-if="['结束待确认'].includes(detailData.status)">
        <view class="left">
          <image src="../../static/tab_custm.png"></image>
          <view>客服</view>
        </view>
        <view class="expand"></view>
        <view class="yellow-btn" @click="navToEvaluate">评价</view>
        <view style="width: 10px"></view>
        <view class="yellow-btn" @click="confirmEnd">确认结束</view>
      </view>

      <view
        class="bottom-fixed-view"
        v-if="['待评价'].includes(detailData.status)">
        <view class="left">
          <image src="../../static/tab_custm.png"></image>
          <view>客服</view>
        </view>
        <view class="expand"></view>
        <view class="yellow-btn" @click="navToEvaluate">评价</view>
      </view>
    </view>

    <uni-popup ref="evaluatePopup">
      <view class="evaluate-dialog-view">
        <view class="top-rate">
          综合服务
          <view class="expand"></view>
          <uni-rate
            size="40"
            activeColor="red"
            :isFill="false"
            color="black"
            v-model="detailData.comprehensiveServices"></uni-rate>
          {{ detailData.comprehensiveServices }}分
        </view>
        <view class="top-rate">
          服务态度
          <view class="expand"></view>
          <uni-rate
            size="40"
            activeColor="red"
            :isFill="false"
            color="black"
            v-model="detailData.servicesAttitude"></uni-rate>
          {{ detailData.servicesAttitude }}分
        </view>
        <view class="top-rate">
          服务质量
          <view class="expand"></view>
          <uni-rate
            size="40"
            activeColor="red"
            :isFill="false"
            color="black"
            v-model="detailData.servicesQuality"></uni-rate>
          {{ detailData.servicesQuality }}分
        </view>
        <view class="top-rate">
          系统使用
          <view class="expand"></view>
          <uni-rate
            size="40"
            activeColor="red"
            :isFill="false"
            color="black"
            v-model="detailData.sysUse"></uni-rate>
          {{ detailData.sysUse }}分
        </view>
        <view class="text-evaluate">
          <view>文字评价</view>
          <textarea
            v-model="detailData.evaluate"
            placeholder="请简单评价下护士的服务"></textarea>
        </view>
        <view class="submit-btn" @click="submitEvaluate">提交</view>
      </view>
    </uni-popup>
  </view>
</template>

<script>
import * as orderInfo from "../../common/api/orderInfo.js";
import cnMoney from "../../components/cn-money/cn-money";
import * as wxPay from "../../common/api/wxPay.js";
import * as loginUtils from "../../utils/loginUtils.js";
export default {
  components: {
    cnMoney,
  },
  data() {
    return {
      uid: "",
      serviceItemUid: "",
      detailData: {},
      itemsData: {},
      diagnosisProofList: [],
      showMaterialList: false,
      detailData: {
        orderMaterialnfo: [], // 你的原始数据
      },
    };
  },
  onLoad(opt) {
    const item = JSON.parse(decodeURIComponent(opt.item));
    this.itemsData = item;
    console.log("接收的整个对象：", this.itemsData);
    this.uid = item.uid;
    this.serviceItemUid = item.serviceItemUid;
  },
  onShow() {
    this.getData();
  },
  methods: {
    toggleMaterialList() {
      this.showMaterialList = !this.showMaterialList;
    },
    getData() {
      const param = {
        uid: this.uid,
      };
      orderInfo
        .queryById(param)
        .then((result) => {
          this.detailData = result.data.data;
          this.handleDiagnosisProofList();
        })
        .catch((error) => {
          console.log(error);
        });
    },
    handleDiagnosisProofList() {
      const diagnosisProof = this.detailData.diagnosisProof || "";
      this.diagnosisProofList = diagnosisProof.split("|");
    },
    cancelOrder() {
      uni.showModal({
        title: "提示",
        content: "确认取消订单？",
        success: (res) => {
          if (res.confirm) {
            console.log("用户点击确定");
            const param = {
              uid: this.uid,
              status: "待退款",
            };
            orderInfo
              .update(param)
              .then((result) => {
                this.getData();
              })
              .catch((error) => {
                console.log(error);
              });
          } else if (res.cancel) {
            console.log("用户点击取消");
          }
        },
      });
    },
    cancelNoPayOrder() {
      uni.showModal({
        title: "提示",
        content: "确认取消订单？",
        success: (res) => {
          if (res.confirm) {
            console.log("用户点击确定");
            const param = {
              uid: this.uid,
              status: "已取消",
            };
            orderInfo
              .update(param)
              .then((result) => {
                this.getData();
              })
              .catch((error) => {
                console.log(error);
              });
          } else if (res.cancel) {
            console.log("用户点击取消");
          }
        },
      });
    },
    confirmEnd() {
      uni.showModal({
        title: "提示",
        content: "确认结束？",
        success: (res) => {
          if (res.confirm) {
            console.log("用户点击确定");
            const param = {
              uid: this.uid,
              status: "已完成",
            };
            orderInfo
              .update(param)
              .then((result) => {
                this.getData();
              })
              .catch((error) => {
                console.log(error);
              });
          } else if (res.cancel) {
            console.log("用户点击取消");
          }
        },
      });
    },
    showEvaluateDialog() {
      this.$refs.evaluatePopup.open();
    },
    submitEvaluate() {
      const param = Object.assign(
        {},
        {
          uid: this.uid,
          evaluate: this.detailData.evaluate, //评价
          comprehensiveServices: this.detailData.comprehensiveServices, //综合服务
          servicesAttitude: this.detailData.servicesAttitude, //服务态度
          servicesQuality: this.detailData.servicesQuality, //服务质量
          sysUse: this.detailData.sysUse, //系统使用
        }
      );
      orderInfo
        .update(param)
        .then((result) => {
          console.log("result", result);
          this.$refs.evaluatePopup.close();
          this.getData();
        })
        .catch((error) => {
          console.log(error);
        });
    },
    navToEvaluate() {
      uni.navigateTo({
        url:
          "/patientAppPages/pages/userEvaluation/userEvaluation?uid=" +
          this.uid,
      });
    },
    navToReschedule(item) {
      const itemStr = encodeURIComponent(JSON.stringify(this.itemsData));

      uni.navigateTo({
        url: `/patientAppPages/pages/RescheduleDetails/RescheduleDetails?item=${itemStr}`,
        // url:
        //   "/patientAppPages/pages/RescheduleDetails/RescheduleDetails?uid=" +
        //   this.serviceItemUid,
      });
    },
    toPay() {
      // this.pay(this.detailData)
      this.navToDetails(this.detailData);
    },
    navToDetails(orderInfo) {
      uni.redirectTo({
        url: `/patientAppPages/pages/expenseDetail/expenseDetail?orderUid=${orderInfo.uid}&orderNum=${orderInfo.orderNum}&feeRules=${orderInfo.feeRules}`,
      });
    },
    pay(orderInfo) {
      const param = {
        orderType: "护士上门",
        totalPrice: Number.parseFloat(orderInfo.orderAmount) * 100,
        goodsName: orderInfo.serviceItem,
        openId: uni.getStorageSync("openid_key"),
        orderSn: orderInfo.orderNum,
      };
      wxPay
        .createOrder(param)
        .then((result) => {
          const data = result.data.data;
          const orderInfo = {
            appid: loginUtils.APPID, // 微信开放平台 - 应用 - AppId，注意和微信小程序、公众号 AppId 可能不一致
            nonceStr: data.nonceStr, // 随机字符串
            package: data.prepayId, // 固定值
            timeStamp: "" + data.timeStamp, // 时间戳（单位：秒）
            paySign: data.paySign, // 签名，这里用的 MD5/RSA 签名
            signType: "HMAC-SHA256",
          };
          console.log("orderInfo", orderInfo);
          uni.requestPayment({
            provider: "wxpay",
            ...orderInfo,
            success(res) {
              console.log("支付成功", res);
              uni.showToast({
                icon: "success",
                title: "支付成功",
                complete() {
                  setTimeout(() => {
                    uni.navigateBack();
                  }, 2000);
                },
              });
            },
            fail(err) {
              console.log("支付失败", err);
              uni.showToast({
                icon: "none",
                title: "支付失败",
                complete() {},
              });
            },
          });
        })
        .catch((error) => {
          console.log(error);
        });
    },
    navToOrderSteps() {
      uni.navigateTo({
        url: `/patientAppPages/pages/orderSteps/orderSteps?orderUid=${this.uid}`,
      });
    },
  },
};
</script>
<style>
page {
  background-color: #f5f5f5;
}
</style>
<style lang="scss" scoped>
.container-view {
  display: flex;
  flex-direction: column;
}

.top-bg {
  width: 100%;
  height: 860rpx;
  background: linear-gradient(to bottom, #0bc5ae, #0bc5ae, #f9f9f9);
}

.status-view {
  margin-left: 20rpx;
  margin-right: 20rpx;
  margin-top: -820rpx;
  display: flex;

  .status-icon {
    width: 132rpx;
    height: 132rpx;
  }

  .status-text-view {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    margin-left: 20rpx;

    .status-text {
      color: white;
      font-size: 44rpx;
    }

    .status-tip {
      color: white;
      font-size: 28rpx;
    }
  }
}

.card-view {
  margin-left: 20rpx;
  margin-right: 20rpx;
  margin-top: 20rpx;
  background: white;
  padding: 30rpx;
  border-radius: 20rpx;
  box-sizing: border-box;
}

.div-line {
  width: 100%;
  height: 2rpx;
  background: #f8f8f8;
}

.info-view {
  padding: 0 30rpx;
  display: flex;
  flex-direction: column;

  .info-row {
    display: flex;
    min-height: 120rpx;
    align-items: center;

    .title {
      color: #232323;
      font-size: 30rpx;
      font-weight: bold;
    }

    .name {
      text-align: end;
      flex: 1;
      color: rgba(35, 35, 35, 0.8);
      font-size: 30rpx;
    }
  }
}

.img-card-view {
  .title {
    font-size: 30rpx;
    color: #232323;
    font-weight: bold;
    margin-bottom: 10rpx;
  }

  .item-view {
    width: 100%;
    height: 100%;
    padding: 10rpx;
    box-sizing: border-box;

    image {
      width: 100%;
      height: 100%;
      border-radius: 20rpx;
    }
  }
}

.proj-view {
  .title {
    font-size: 30rpx;
    color: #232323;
    font-weight: bold;
    margin-bottom: 10rpx;
  }

  .list {
    display: flex;
    align-items: center;
    margin-top: 20rpx;

    image {
      width: 136rpx;
      height: 136rpx;
      border-radius: 20rpx;
    }

    .name {
      flex: 1;
      font-size: 30rpx;
      font-weight: bold;
      color: #232323;
      margin-left: 20rpx;
    }

    .price {
    }
  }
}

.order-info {
  padding: 0 30rpx;
  display: flex;
  flex-direction: column;
  margin-bottom: 150rpx;

  .info-row {
    display: flex;
    min-height: 120rpx;
    align-items: center;
    justify-content: space-between;

    .title {
      color: #232323;
      font-size: 30rpx;
    }

    .name {
      color: rgba(35, 35, 35, 0.8);
      font-size: 30rpx;
      display: flex;
      align-items: center;
    }

    .text-btn {
      margin-left: 20rpx;
      color: #0bc5ae;
      font-size: 30rpx;
    }
  }
}

.bottom-fixed-view {
  width: 100%;
  height: 116rpx;
  position: fixed;
  bottom: 0;
  background: white;
  padding: 0 30rpx;
  box-sizing: border-box;
  display: flex;
  align-items: center;

  .left {
    display: flex;
    flex-direction: column;
    font-size: 20rpx;
    color: rgba(35, 35, 35, 0.7);

    image {
      width: 44rpx;
      height: 44rpx;
    }
  }

  .expand {
    flex: 1;
  }

  .btn-view {
    width: 226rpx;
    height: 88rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    border: solid 2rpx #0bc5ae;
    border-radius: 44rpx;
    color: #0bc5ae;
    font-size: 30rpx;
  }

  .yellow-btn {
    width: 226rpx;
    height: 88rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    border: solid 2rpx #f59a23;
    border-radius: 44rpx;
    color: #f59a23;
    font-size: 30rpx;
  }
}

.nurse-info-view {
  margin-left: 30rpx;
  margin-right: 30rpx;
  background: white;
  border-radius: 20rpx;
  box-sizing: border-box;
  padding: 30rpx;
  display: flex;
  flex-direction: column;

  .title {
    font-size: 35rpx;
    font-weight: bold;
    color: #232323;
  }

  .body {
    margin-top: 20rpx;
    display: flex;
    align-items: center;

    image {
      width: 80rpx;
      height: 80rpx;
      border-radius: 50%;
    }

    .right {
      margin-left: 20rpx;

      .name {
        font-size: 26rpx;
        font-weight: bold;
        color: #232323;
      }

      .hospital-name {
        font-size: 26rpx;
        font-weight: bold;
        color: rgba(35, 35, 35, 0.6);
      }
    }
  }
}

.evaluate-dialog-view {
  width: 700rpx;
  background: white;
  border-radius: 20rpx;
  box-sizing: border-box;
  padding: 30rpx;
  display: flex;
  flex-direction: column;

  .top-rate {
    display: flex;
    align-items: center;
  }

  .expand {
    width: 20rpx;
  }

  .text-evaluate {
    margin-top: 20rpx;
    margin-bottom: 20rpx;
  }

  textarea {
    border: solid 1rpx #d6d6d6;
    width: 100%;
    height: 200rpx;
    margin-top: 20rpx;
    padding: 10rpx;
    box-sizing: border-box;
  }

  .submit-btn {
    width: 100%;
    height: 80rpx;
    background: #0bc5ae;
    border-radius: 30rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
  }
}

.material-item {
  position: relative;
  padding-bottom: 20rpx;
}

.has-line::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: red;
  margin: 10rpx 0;
}

.bold-text {
  font-weight: 600;
  /* 比默认bold更明显的加粗效果 */
}
</style>
